<template>
  <div>
     <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <Row :gutter="20">
      <Col span="18">
        <chart-piem
          :text="XueKeNLtext"
          :value="chart_bar_data11"
          :loading="loading"
          style="height: 650px"
        ></chart-piem>
      </Col>
      <Col span="5">
          <Form label-position="top" class="inputs">
            <Divider orientation="left">图表名称</Divider>
            <div style="margin-bottom: 40px">
              <FormItem>
                <Input v-model="XueKeNLtext" placeholder="请输入图表名称" />
              </FormItem>
            </div>
            <div style="margin-bottom: 40px">
              <Divider orientation="left">机构名称</Divider>
              <draggable v-model="chart_bar_data11.series">
                <transition-group>
                  <FormItem
                    v-for="(item, index) in chart_bar_data11.series"
                    :key="index"
                  >
                    <Input v-model="item.text"></Input>
                  </FormItem>
                </transition-group>
              </draggable>
            </div>
          </Form>
      </Col>
    </Row>
  </div>
</template>

<script>
import ChartPiem from "@/components/charts/mpies.vue";
import draggable from 'vuedraggable'
export default {
  name: "mpies",
  components: {
    ChartPiem,
    draggable
  },
  data() {
    return {
      loading: false,
      HbarWidth: '30',
      XueKeNLtext: 'bar图表名称',
      hNumberRotate: '45',
      chart_bar_data11: {
        series: [
          {
            text: "上海",
            data: [
              { value: 335, name: "EP", selected: true },
              { value: 679, name: "WO" },
            ],
          },
          {
            text: "北京",
            data: [
              { value: 335, name: "KR", selected: true },
              { value: 679, name: "EP" },
              { value: 1548, name: "WO" },
            ],
          },
          {
            text: "深圳",
            data: [
              { value: 335, name: "EP", selected: true },
              { value: 679, name: "KR" },
              {
                value: 18,
                name: "US",
                labelLine: { show: true },
                label: { position: "outer" },
              },
              {
                value: 18,
                name: "WO",
                labelLine: { show: true },
                label: { position: "outer" },
              },
              { value: 148, name: "JP" },
              // , labelLine:{show:true},label:{position:'outer'}
            ],
          },
        ],
      },
    };
  },
  methods: {},
  mounted() {},
};
</script>
